<template>
	<div class='index'>
		<el-dialog
			:title="state.windowTitle"
			custom-class="gz-dlg"
			@close="state.showWindow = false"
			:close-on-click-modal="false"
			v-if="state.showWindow"
			:visible.sync="state.showWindow"
			width="80%"
			top="5vh"
		>
			<!--<component-->
			<!--	:options="{ multiSelect: false, baseUrl: '/mnt/dataEngine' }"-->
			<!--	:is="componentName"-->
			<!--	@submit="onChildSubmit"-->
			<!--&gt;</component>-->
		</el-dialog>
		<div
			ref='roketEle'
			:style='dragInfo.style.value'
			class='rocket-container'
			@dblclick="fn.openWindow('TaskManage', '任务管理')"
			@mouseenter='fn.show(true)'
			@mouseleave='fn.show(false)'
		>
			<div class='table-wrapper'>
				<!--                v-if="showTable"-->
				<div
					v-if='state.showTable'
					class='main-task-table'
					@mouseenter='fn.show(true)'
					@mouseleave='fn.show(false)'
				>
					<el-row class='status-bar'>
						<el-col :span='14'>
							<div
								:class="[
                                    'type',
                                    { active: viewKey === 'running' }
                                ]"
								@click="handleTabClick('running')"
							>
								执行中({{ computedState.undoneTaskNum }})
							</div>
							<div
								:class="[
                                    'type',
                                    { active: state.viewKey === 'done' }
                                ]"
								@click="handleTabClick('done')"
							>
								已完成 ({{ computedState.doneoneTaskNum }})
							</div>
						</el-col>
						<el-col :span='10'>
							<div class='search'>
								<el-input
									v-model='state.searchKey'
									placeholder='请输入任务名'
									size='mini'
									@change='searchTaskList'
								>
									<fa
										slot='append'
										color='#70A9FE'
										icon='search'
									></fa>
								</el-input>
							</div>
						</el-col>
					</el-row>
					<el-table
						:data='state.showTableData'
						header-cell-class-name='my-table-header-cell'
						height='280'
					>
						<el-table-column
							label='任务名'
							prop='taskname'
						></el-table-column>
						<el-table-column label='状态' prop='state'>
							<template slot-scope='scope'>
								<el-tag
									:type='translateState4Type(scope.row.state)'
								>
									{{ scope.row.state }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column label='进度' prop=''>
							<template slot-scope='scope'>
								<el-progress
									:percentage='scope.row.process || 0'
								></el-progress>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>

		<div class='user-info'>
			<span class='avatar' @click='logout' />
			<span class='name'>感知天下</span>
		</div>
		<div class='grid-container '>
			<div class='item-grid-row'>
				<div class='item-grid'>
					<div
						class='item-col-12 item-title-1 item-title-color '
						style='background-image: url("src/assets/img/main/btn-statelite.png")'
						@click="fn.openWindow('Statelite', '卫星')"
					>
						<span class='label'>卫星</span>
					</div>
				</div>
				<div class='item-grid'>
					<!--                    <div-->
					<!--                        @click="go({ path: 'fileList3' })"-->
					<!--                        class="item-col-12 item-title-2 item-title-color"-->
					<!--                        style="background: linear-gradient(226deg, #59BB6B 0%, #0C9525 100%);"-->
					<!--                    >-->
					<!--                        <span class="label">我的数据</span>-->
					<!--                        <div-->
					<!--                            class="bgc-img"-->
					<!--                            style="background-image: url(/img/main/btn-data.png);"-->
					<!--                        ></div>-->
					<!--                    </div>-->

					<div
						class='item-col-12 item-title-2 item-title-color'
						style='background: linear-gradient(226deg, #59BB6B 0%, #0C9525 100%);'
						@click="fn.openWindow('file-explorer', '我的数据')"
					>
						<span class='label'>我的数据</span>
						<div
							class='bgc-img'
							style='background-image: url(src/assets/img/main/btn-data.png);'
						></div>
					</div>
				</div>
			</div>
			<div class='item-grid-row'>
				<div class='item-grid'>
					<div
						class='item-col-6 item-title-1 item-title-color'
						style='background-image: url("src/assets/img/main/btn-pilot.png")'
					>
                        <span class='label' style='color: #636363'>
                            无人机
                        </span>
					</div>
					<div
						class='item-col-6 item-title-1 item-title-color'
						style='background-image: url("src/assets/img/main/btn-SAR.png")'
					>
                        <span class='label'>
                            SAR/INSAR
                        </span>
					</div>
				</div>
				<div class='item-grid'>
					<div
						class='item-col-6 item-title-2 item-title-color'
						style='background:linear-gradient(97deg, #0098A9 0%, #0AB6CA 100%);'
						@click="fn.openWindow('flow-manage', '流程管理')"
					>
                        <span class='label'>
                            流程
                        </span>
						<div
							class='bgc-img'
							style='background-image: url(src/assets/img/main/btn-flow.png);'
						></div>
					</div>
					<div
						class='item-col-6 item-title-2 item-title-color'
						style='background:linear-gradient(269deg, #C27164 0%, #AC3725 100%);'
						@click="fn.openWindow('tools-view', '工具集')"
					>
                        <span class='label'>
                            工具集
                        </span>
						<div
							class='bgc-img'
							style='background-image: url(src/assets/img/main/btn-tools.png);'
						></div>
					</div>
				</div>
			</div>
			<div class='item-grid-row'>
				<div class='item-grid'>
					<div
						class='item-col-6 item-title-1 item-title-color'
						style='background-image: url("src/assets/img/main/btn-analysis.png")'
					>
                        <span class='label'>
                            AI解析
                        </span>
					</div>
					<div
						class='item-col-6 item-title-1 item-title-color'
						style='background-image: url("src/assets/img/main/btn-laser.png")'
					>
                        <span class='label'>
                            激光雷达
                        </span>
					</div>
				</div>
				<div class='item-grid'>
					<div
						class='item-col-12 item-title-2 item-title-color'
						style='background: linear-gradient(265deg, #E8B878 0%, #C48736 100%);'
						@click="fn.openWindow('ResourceManage', '资源管理')"
					>
                        <span class='label'>
                            系统资源
                        </span>
						<div
							class='bgc-img'
							style='background-image: url(src/assets/img/main/btn-resource.png);'
						></div>
					</div>
				</div>
			</div>
			<div class='item-grid-row'>
				<div class='item-grid'>
					<div
						class='item-col-12 item-title-1 item-title-color item-title-vhc'
						style='background:url("src/assets/img/main/btn-common.png") ;background-size: cover;'
						@click="fn.openWindow('MyProject', '我的项目')"
					>
                        <span class='label'>
                            通用
                        </span>
					</div>
				</div>
				<div class='item-grid'>
					<div
						class='item-col-4 item-title-2 item-title-color'
						style='background-color:#790096;'
						@click="fn.openWindow('UserManage', '用户管理')"
					>
                        <span class='label'>
                            用户
                        </span>
						<div
							class='bgc-img'
							style='background-image: url(src/assets/img/main/btn-user.png);'
						></div>
					</div>
					<div
						class='item-col-4 item-title-2 item-title-color'
						style='background:linear-gradient(270deg, #C95B5B 0%, #B82727 100%);'
						@click="fn.openWindow('AuthMange', '权限管理')"
					>
                        <span class='label'>
                            权限
                        </span>
						<div
							class='bgc-img'
							style='background-image: url(src/assets/img/main/btn-auth.png);'
						></div>
					</div>
					<div
						class='item-col-4 item-title-2 item-title-color'
						style='background:linear-gradient(270deg, #5682BE 0%, #2065C4 100%);'
					>
						<span class='label'>设置</span>
						<div class='bgc-img' style='background-image: url(src/assets/img/main/btn-setting.png);'></div>
					</div>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
import { useDraggable } from '@vueuse/core/index'

export default {
	name: 'index',
	data() {
		return {
			key: '123',
			viewKey: 'running',
			rocket_state: 'release',
			rocketPosition: {},
			tableData: [],
			showTableData: [],
			searchKey: '',
			activeName: 'all',
			showTable: false,
			showWindow: false,
			windowTitle: '窗口',
			componentName: 'file-explorer',
			menuList: [
				{
					name: '',
					path: '',
					col: 1,
					icon: '',
					bgColor: '',
					title_level: 1,
					titleStyle: {},
				},
			],
		}
	},
	mounted() {
	},
	setup() {
		const roketEle = ref(null)
		const fn = {
			show(flag) {
				// if (this.rocket_state === 'dragging') {
				// 	return
				// }
				// // console.log('show return')
				// if (flag === true) {
				// 	if (this.rocket_timer) {
				// 		clearTimeout(this.rocket_timer)
				// 		this.rocket_timer = null
				// 	}
				//
				// 	this.showTable = flag
				// 	this.getTaskList()
				// 	this.handleTabClick('running')
				// } else {
				// 	var x = () => {
				// 		this.showTable = flag
				// 	}
				// 	this.rocket_timer = setTimeout(x, 500)
				// }
			},
			handleTabClick(viewKey) {
				if (this.rocket_state === 'dragging') return
				this.viewKey = viewKey
				if (viewKey === 'done') {
					this.showTableData = this.tableData.filter(
						item =>
							item.state === 'SUCCESS' &&
							item.taskname.includes(this.searchKey),
					)
				} else {
					this.showTableData = this.tableData.filter(
						item =>
							item.state !== 'SUCCESS' &&
							item.taskname.includes(this.searchKey),
					)
				}
			},
			catchRocket($event) {
				// console.log('$event', $event)
				this.rocket_state = 'catched'
			},
			moveRocket($event) {
				if (this.rocket_state === 'catched') {
					// console.log('left: $event', $event)
					// console.log('left: $event.ScreenY', $event.ScreenY)
					// console.log('left: $event.ScreenX', $event.ScreenX)

					this.rocketPosition = {
						left: $event.pageX + 'px',
						bottom: $event.pageY + 'px',
					}
				}
			},
			releaseRocket($event) {
				this.rocket_state = 'release'
			},
			searchTaskList() {
				let params = {
					taskname: this.searchKey,
				}
				this.viewKey = ''
				this.$axios.post(api.url_selectTask, params).then(res => {
					if (res.status === 200) {
						// this.$message.success(res.data.code)
						this.$message.success(res.data.message)
						if (res.data.data) {
							this.tableData = res.data.data
							this.showTableData = this.tableData
						}
					} else {
						this.$message.warning(res.data.message)
					}
				})
			},
			getTaskList() {
				// this.$message.success('获取任务列表')
				if (this.rocket_state === 'dragging') return
				let params = {}
				this.$axios.post(api.url_selectTask, params).then(res => {
					if (res.status === 200) {
						// this.$message.success(res.data.code)
						this.$message.success(res.data.message)
						if (res.data.data) {
							this.tableData = res.data.data
						}
					} else {
						this.$message.warning(res.data.message)
					}
				})
			},
			logout() {
				this.$router.push('login')
			},
			closeWindow() {
				this.showWindow = false
			},
			//打开对应的窗口
			openWindow(componentName, title) {

				console.log('引入测试')

				// console.log('componentName====>', componentName)
				// console.log('title====>', title)
				// this.windowTitle = title
				// this.showWindow = true
				// this.componentName = componentName
				// this.$forceUpdate()
			},
			go(item) {
				// console.log('go')
				// console.log('item :>> ', item)
				let { path } = item
				// this.$router.beforeEach((to, from, next) => {
				//     // ${//to and from are Route Object,next() must be called to resolve the hook}
				// //     console.log('to :>> ', to);
				//     // document.title = to.meta.title
				//     next()

				// })

				// this.componentName = ''
				this.$router.push({ path })
			},
			onChildSubmit(data) {
				// console.log('onChildSubmit====>', data)
			},
			translateState4Type(state) {
				// WAITING RUNNING FAILED SUCCESS
				var state_type = ''

				switch (state) {
					case 'WAITING':
						state_type = 'warning'
						break
					case 'RUNNING':
						state_type = 'info'
						break
					case 'FAILED':
						state_type = 'danger'
						break
					case 'SUCCESS':
						state_type = 'success'
						break
					default:
						state_type = 'info'
				}
				return state_type
			},
		}

		//note: 实现拖拽
		const dragInfo =  useDraggable(roketEle,{
			initialValue:{
				x:40,
				y:40,
			}
		})
		// watchEffect(()=>{
		// 	console.log('dragInfo',dragInfo.style)
		// })
		// onMounted(()=>{
		// 	console.log('123123Mounted')
		//
		//
		// })

		const undoneTaskNum = computed(() => {
				var done_state = ['SUCCESS']
				var running_state = ['WAITING', 'RUNNING']

				return state.tableData.filter(item =>
					running_state.includes(item.state),
				).length
			},
		)

		const doneoneTaskNum = computed(() => {
			var done_state = ['SUCCESS']
			var running_state = ['WAITING', 'RUNNING']
			return state.tableData.filter(item =>
				done_state.includes(item.state),
			).length
		})

		const computedState = { undoneTaskNum, doneoneTaskNum }

		const state = reactive({
			key: '123',
			viewKey: 'running',
			rocket_state: 'release',
			rocketPosition: {},
			tableData: [],
			showTableData: [],
			searchKey: '',
			activeName: 'all',
			showTable: false,
			showWindow: false,
			windowTitle: '窗口',
			componentName: 'file-explorer',
			menuList: [
				{
					name: '',
					path: '',
					col: 1,
					icon: '',
					bgColor: '',
					title_level: 1,
					titleStyle: {

					},
				},
			],
		})
		return {
			fn,
			state,
			computedState,
			dragInfo,
			roketEle,
		}
	},
	methods: {
		show(flag) {
			if (this.rocket_state === 'dragging') {
				return
			}
			// console.log('show return')
			if (flag === true) {
				if (this.rocket_timer) {
					clearTimeout(this.rocket_timer)
					this.rocket_timer = null
				}

				this.showTable = flag
				this.getTaskList()
				this.handleTabClick('running')
			} else {
				var x = () => {
					this.showTable = flag
				}
				this.rocket_timer = setTimeout(x, 500)
			}
		},
		handleTabClick(viewKey) {
			if (this.rocket_state === 'dragging') return
			this.viewKey = viewKey
			if (viewKey === 'done') {
				this.showTableData = this.tableData.filter(
					item =>
						item.state === 'SUCCESS' &&
						item.taskname.includes(this.searchKey),
				)
			} else {
				this.showTableData = this.tableData.filter(
					item =>
						item.state !== 'SUCCESS' &&
						item.taskname.includes(this.searchKey),
				)
			}
		},
		catchRocket($event) {
			// console.log('$event', $event)
			this.rocket_state = 'catched'
		},
		moveRocket($event) {
			if (this.rocket_state === 'catched') {
				// console.log('left: $event', $event)
				// console.log('left: $event.ScreenY', $event.ScreenY)
				// console.log('left: $event.ScreenX', $event.ScreenX)

				this.rocketPosition = {
					left: $event.pageX + 'px',
					bottom: $event.pageY + 'px',
				}
			}
		},
		releaseRocket($event) {
			this.rocket_state = 'release'
		},
		searchTaskList() {
			let params = {
				taskname: this.searchKey,
			}
			this.viewKey = ''
			this.$axios.post(api.url_selectTask, params).then(res => {
				if (res.status === 200) {
					// this.$message.success(res.data.code)
					this.$message.success(res.data.message)
					if (res.data.data) {
						this.tableData = res.data.data
						this.showTableData = this.tableData
					}
				} else {
					this.$message.warning(res.data.message)
				}
			})
		},
		getTaskList() {
			// this.$message.success('获取任务列表')
			if (this.rocket_state === 'dragging') return
			let params = {}
			this.$axios.post(api.url_selectTask, params).then(res => {
				if (res.status === 200) {
					// this.$message.success(res.data.code)
					this.$message.success(res.data.message)
					if (res.data.data) {
						this.tableData = res.data.data
					}
				} else {
					this.$message.warning(res.data.message)
				}
			})
		},
		logout() {
			this.$router.push('login')
		},
		closeWindow() {
			this.showWindow = false
		},
		//打开对应的窗口
		openWindow(componentName, title) {
			// console.log('componentName====>', componentName)
			// console.log('title====>', title)
			// this.windowTitle = title
			// this.showWindow = true
			// this.componentName = componentName
			// this.$forceUpdate()
		},
		go(item) {
			// console.log('go')
			// console.log('item :>> ', item)
			let { path } = item
			// this.$router.beforeEach((to, from, next) => {
			//     // ${//to and from are Route Object,next() must be called to resolve the hook}
			// //     console.log('to :>> ', to);
			//     // document.title = to.meta.title
			//     next()

			// })

			// this.componentName = ''
			this.$router.push({ path })
		},
		onChildSubmit(data) {
			// console.log('onChildSubmit====>', data)
		},
		translateState4Type(state) {
			// WAITING RUNNING FAILED SUCCESS
			var state_type = ''

			switch (state) {
				case 'WAITING':
					state_type = 'warning'
					break
				case 'RUNNING':
					state_type = 'info'
					break
				case 'FAILED':
					state_type = 'danger'
					break
				case 'SUCCESS':
					state_type = 'success'
					break
				default:
					state_type = 'info'
			}
			return state_type
		},
	},
	computed: {
		undoneTaskNum() {
			var done_state = ['SUCCESS']
			var running_state = ['WAITING', 'RUNNING']

			return this.tableData.filter(item =>
				running_state.includes(item.state),
			).length
		},
		doneoneTaskNum() {
			var done_state = ['SUCCESS']
			var running_state = ['WAITING', 'RUNNING']
			return this.tableData.filter(item =>
				done_state.includes(item.state),
			).length
		},
	},
}
</script>

<style lang='scss' scoped>
@import 'src/assets/scss/main.scss';

.index {
	@include fullHW;
	//background-color: $color-purple-1;
	position: relative;
	@include flex-align-center;
	background-image: url(src/assets/img/main/bg-main.png);
	background-size: cover;

	$rocket_left: 1480px;
	$rocket_top: 68px;

	.rocket-container {
		position: fixed;
		width: 102px;
		height: 98px;
		top: $rocket_top;
		left: $rocket_left;
		z-index: 30;
		//left: 0;
		//top: 0;
		//border: 1px solid #FFFFFF;
		background: url('src/assets/img/main/task-rocket.png');
		background-size: cover;
		//@include animate_trans(opacity, 0.2s);

		&:active {
			//opacity: 0.7;

			//box-shadow: 0px 0px 10px whitesmoke;
		}

		//opacity: 0.5;
		.table-wrapper {
			position: relative;
			transition: 0.2s all;
			//position: absolute;
			left: -136px;
			top: 89px;
			width: 0;
			height: 0;
			z-index: 20;

			.main-task-table {
				position: absolute;
				transition: 0.2s all;
				padding: 10px;
				//width: 1300px;
				width: 20vw;
				height: 340px;

				background: #ffffff;
				box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
				opacity: 1;
				border-radius: 13px;

				.status-bar {
					padding: {
						left: 20px;
						top: 15px;
					}

					.el-col {
						display: flex;
						//@include flex-align-center-vh;
						.type {
							//height: 21px;
							display: inline-block;

							min-width: 90px;
							text-align: center;
							height: 21px;
							cursor: pointer;
							font-size: 16px;
							font-family: Microsoft YaHei;
							user-select: none;
							font-weight: 400;
							line-height: 21px;
							color: #999999;
							opacity: 1;
						}

						.type.active {
							color: #71aafe;
						}
					}
				}

				.my-table-header-cell {
					//width: 1124px;
					//height: 39px;
					background: #efefef;
					opacity: 1;
					border-radius: 2px;
				}
			}
		}
	}

	.user-info {
		position: absolute;
		height: 40px;
		width: 166px;
		right: 0px;
		top: 40px;

		.avatar {
			float: left;
			//background-color: $color-purple;
			display: inline-block;
			width: 40px;
			height: 40px;
			//border:0px solid transparent;
			background-image: url(src/assets/img/main/btn-user.png);
			background-size: cover;
			border: {
				radius: 50%;
			}
		}

		.name {
			margin-left: 10px;
			display: inline-block;
			float: left;
			width: 66px;
			height: 100%;
			font-size: 16px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			line-height: 40px;
			color: #ffffff;
			opacity: 1;
		}
	}

	.grid-container {
		width: calc(100% - 685px);
		margin-top: 200px;
		display: grid;
		gap: 20px 0;

		overflow-x: hidden;
		overflow-y: auto;
		grid-auto-flow: row dense;
		grid-template-rows: repeat(auto-fit, 150px);
		//position: relative;
		.item-grid-row {
			width: 100%;
			height: 150px;
			display: grid;
			grid-template-columns: repeat(2, calc(50% - 30px));
			gap: 0px 60px;
		}

		//单行横排元素
		.item-grid {
			height: 150px;
			display: grid;
			margin: 10px;
			grid-template-columns: repeat(12, 1fr);
			gap: 0px 20px;

			.item {
				//background-color: $color-pink;
				text-align: center;
				//border: 1px solid #707070;
				background-size: cover;
				//transition: all .2s;
				@include animate_trans();
				user-select: none;
				cursor: pointer;
				overflow: hidden;

				&:hover {
					//opacity: 0.7;
					@include base-box-shadow-10;
				}

				&:active {
					//transform: translate(2px,2px);
					@include hover-move(2px);
				}
			}

			[class^='item-col'] {
				@extend .item;
				border-radius: 4px;
				@include flex-align-center;

				.bgc-img {
					margin-top: 30px;
					width: 85px;
					height: 85px;
					background-size: contain;
				}
			}

			.item-col-12 {
				grid-column-start: span 12;
			}

			.item-col-6 {
				grid-column-start: span 6;
			}

			.item-col-4 {
				grid-column-start: span 4;
			}

			.item-title {
				font-family: 'Microsoft YaHei';
			}

			.item-title-1 {
				@extend .item-title;
				font-size: 33px;
				position: relative;

				span.label {
					display: block;
					position: absolute;
					left: 30px;
					bottom: 16px;
				}
			}

			.item-title-2 {
				@extend .item-title;
				font-size: 21px;
				position: relative;

				span.label {
					position: absolute;
					left: 20px;
					bottom: 15px;
				}
			}

			.item-title-vhc {
				transform: translate(0, 9);
			}

			.item-title-color {
				color: #fff;
			}

			.item-title-color-o {
				color: #636363;
			}

			.item-font-left-bottom {
				line-height: 100%;
				text-align: left;
			}
		}
	}
}
</style>
